<template>
  <div class="theme">
    <n-popover trigger="hover" v-if="theme === 'dark'">
      <template #trigger>
        <div class="icon-wrapper" @click="theme = 'light'">
          <n-icon :size="18">
            <sun />
          </n-icon>
        </div>
      </template>
      浅色
    </n-popover>
    <n-popover trigger="hover" v-if="theme === 'light'">
      <template #trigger>
        <div class="icon-wrapper" @click="theme = 'dark'">
          <n-icon :size="18">
            <moon />
          </n-icon>
        </div>
      </template>
      浅色
    </n-popover>
    <n-switch
      style="margin-left: 10px; font-size: 12px"
      :default-value="theme === 'auto'"
      size="medium"
      @update:value="(value) => (theme = value ? 'auto' : 'light')"
    >
      <template #icon>
        <n-icon>
          <brightness />
        </n-icon>
      </template>
      <template #checked> 自动</template>
      <template #unchecked>{{ theme === "dark" ? "暗色" : "浅色" }}</template>
    </n-switch>
  </div>
</template>
<script setup lang="ts">
import { Brightness, Moon, Sun } from "@icon-park/vue-next"
import { useLocalStorage } from "@vueuse/core"
import type { Ref } from "vue"

const theme: Ref<string> = useLocalStorage("theme", "auto")
</script>
<style scoped lang="scss">
.theme {
  display: flex;
  align-items: center;
  justify-content: space-between;

  .icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3px;
    border-radius: 5px;
  }

  .icon-wrapper:hover {
    background-color: rgba(150, 150, 150, 0.4);
  }
}
</style>
